<template>
	<view class="login">
		<div class="wlecom">
			<div class="title">欢迎登录名购岛</div>
			<div class="info">手机号码未注册将自动创建新账号</div>
		</div>
		<div class="input-box">
			<div>+86</div>
			<u-line color="#979699" direction="col" margin="32rpx" length="20rpx" />
			<div>
				<input class="form-item--input" type="number" v-model="phoneNumber" maxlength="11"
					placeholder="请输入手机号码" />
			</div>
		</div>
		<div class="btn-box">
			<div :class="phoneNumber?'btn':'disabled'" @click="getMessHandle">
				获取验证码
			</div>
		</div>
		<div>
			<u-checkbox-group shape="circle"  activeColor="#FF8C19">
			<u-checkbox  v-model="checked"  @change="checkboxChange">
			
			</u-checkbox>	请先勾选并同意 <text style="color: #FF8C19;" @click="$navTo('pageA/web/web?type=1')" >隐私政策</text> 和 <text style="color: #FF8C19;" @click="$navTo('pageA/web/web?type=2')" >用户服务协议</text>
			</u-checkbox-group>
		</div>
	</view>
</template>

<script>
	import * as CaptchaApi from '@/api/captcha'
	export default {
		data() {
			return {
				phoneNumber: '',
				checked:false
			};
		},
		methods: {
			getMessHandle() {
				if (!this.phoneNumber) {
					return
				}

				if (!(/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(this.phoneNumber))) {
					this.$toast('请输入正确手机号')
					return
				}
				
				console.log();
				if(!this.checked){
					this.$toast('请先勾选并同意隐私政策与用户服务协议')
					return
				}
				
				
				let form = {
					mobile: this.phoneNumber
				}
				CaptchaApi.sendSmsCaptcha({
					form
				}).then(res => {
					this.$toast(res.message)
					setTimeout(() => {
						this.$navTo('pageA/app-login2/app-login2', {
							phone: this.phoneNumber
						})
					}, 1500)
				})

			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
		height: 100%;
	}

	.login {
		padding: 96rpx 80rpx 0 80rpx;

	}

	.wlecom {
		margin-bottom: 148rpx;

		.title {
			font-weight: bold;
			font-size: 56rpx;
			color: #030303;
			margin-bottom: 12rpx;
		}

		.info {
			font-weight: 400;
			font-size: 28rpx;
			color: #979699;
		}
	}

	.input-box {
		display: flex;
		align-items: center;
		font-weight: 800;
		font-size: 34rpx;
		color: #030303;
		height: 124rpx;
		border-bottom: 1rpx solid #979699;
		margin-bottom: 52rpx;
	}

	.btn-box {
		margin-bottom: 12rpx;
		.btn {
			height: 88rpx;
			border-radius: 44rpx;
			background-color: #FF8C19;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
		}

		.disabled {
			height: 88rpx;
			border-radius: 44rpx;
			background-color: #FFDCBA;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
		}
	}
</style>